<template>
  <div class="ThemeIcon">
    <div v-show="isDark==false" class="ThemeIcon-item">
      <icon-sleep theme="outline" size="20" :strokeWidth="3" title="关灯" />
      <p>关灯</p>
    </div>
    <div v-show="isDark==true" class="ThemeIcon-item">
      <icon-sun-one theme="outline" size="20" :strokeWidth="3" title="开灯" />
      <p>开灯</p>
    </div>
  </div>
</template>

<script setup>
// import { useDark, useToggle } from "@vueuse/core";
// const isDark = useDark();
// const toggleDark = () => {
//   useToggle(isDark)// 改变主题
//   isDark.value = !isDark.value
//   console.log("是否深色模式", isDark.value);
// }
defineProps({
  isDark: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="less" scoped>
.ThemeIcon {
  span {
    fill: currentColor;
    // color: #000;
  }

  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;

    &:hover {
      color: #34d399;
    }
  }
}
</style>